<template>
  <el-card class="friend-list-card">
    <h2>好友列表</h2>
    <el-form :inline="true" @submit.native.prevent="onAddFriend">
      <el-form-item label="好友ID">
        <el-input v-model="addFriendId" placeholder="输入好友ID"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onAddFriend">添加好友</el-button>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <el-list>
      <el-list-item v-for="friend in friends" :key="friend.id" class="friend-item">
        <el-avatar :src="friend.avatar" icon="el-icon-user" />
        <div class="friend-info">
          <div class="friend-name">
            {{ friend.nickname || '未设置昵称' }} (ID: {{ friend.friendId }})
          </div>
          <div class="friend-actions">
            <el-badge :value="friend.unreadCount" :hidden="friend.unreadCount === 0" class="unread-badge">
              <el-button type="primary" size="mini" @click="onChat(friend.friendId)">聊天</el-button>
            </el-badge>
            <el-button type="danger" size="mini" @click="onDeleteFriend(friend.friendId)">删除</el-button>
          </div>
        </div>
      </el-list-item>
    </el-list>
  </el-card>
</template>

<script>
import axios from 'axios'
export default {
  name: 'FriendListPage',
  data() {
    return {
      userId: '', // 当前用户ID，实际项目应从登录信息获取
      addFriendId: '',
      friends: []
    }
  },
  created() {
    // 假设已登录，userId写死为1，实际应从登录信息获取
    this.userId = localStorage.getItem('userId') || '1'
    this.fetchFriends()
  },
  methods: {
    async fetchFriends() {
      try {
        const res = await axios.get('/api/friends', { params: { userId: this.userId } })
        this.friends = res.data
        // 获取每个好友的未读消息数
        for (let friend of this.friends) {
          try {
            const unreadRes = await axios.get('/api/message/unread-count', {
              params: { userId: this.userId, friendId: friend.friendId }
            })
            friend.unreadCount = unreadRes.data.count
          } catch (e) {
            friend.unreadCount = 0
          }
        }
      } catch (e) {
        this.$message.error('获取好友列表失败')
      }
    },
    onChat(friendId) {
      this.$router.push({ path: '/chat', query: { friendId } })
    },
    async onAddFriend() {
      if (!this.addFriendId) return this.$message.warning('请输入好友ID')
      try {
        await axios.post('/api/friend/add', null, {
          params: { userId: this.userId, friendId: this.addFriendId }
        })
        this.$message.success('添加成功')
        this.addFriendId = ''
        this.fetchFriends()
      } catch (e) {
        this.$message.error(e.response?.data?.message || '添加失败')
      }
    },
    async onDeleteFriend(friendId) {
      try {
        await axios.post('/api/friend/delete', null, {
          params: { userId: this.userId, friendId }
        })
        this.$message.success('删除成功')
        this.fetchFriends()
      } catch (e) {
        this.$message.error('删除失败')
      }
    }
  }
}
</script>

<style scoped>
.friend-list-card {
  max-width: 500px;
  margin: 40px auto;
  padding: 30px 20px;
}
.friend-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.friend-info {
  margin-left: 16px;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.friend-name {
  font-size: 16px;
}
.friend-actions {
  display: flex;
  gap: 8px;
}
.unread-badge {
  margin-right: 8px;
}
</style> 